{layout 'layout.latte'}


{block content}

<div class="bg-gray-100 ">
    <div class="mx-auto max-w-7xl  bg-no-repeat bg-opacity-70 bg-auto"
         style="background-image: url('/theme/images/banner.jpg')">
        <div class="bg-gray-100 bg-opacity-80">
            <div
                    class="flex flex-col justify-center items-center text-center bg-gradient-to-r from-gray-100 via-transparent to-gray-100"
                    style="height: 200px; ">
                <div class=" text-gray-900 text-2xl mb-4 font-bold">
                    {_'tags'}
                </div>

                {* 位置导航 *}
                <div class="text-gray-500">
                    <div class=" flex flex-row gap-2">
                        <div>
                            <a href="/" class="hover:underline">{_'home'}</a>
                        </div>
                        <div>&rsaquo;&rsaquo;</div>
                        <div><a class="hover:underline" href="/page/tags">{_'tags'}</a></div>
                        {if $id}
                        <div>&rsaquo;&rsaquo;</div>
                        <div><a class="hover:underline" href="/page/tags/{$id}">{$id}</a></div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mx-auto  max-w-7xl mt-6 ">
    {var $tagList = App\Content\Service\Tags::lists()}
    <div class="flex gap-2 flex-wrap">
        {foreach $tagList as $item}
        <a href="/page/tags/{$item->name}" class="rounded px-2 py-1 cursor-pointer hover:opacity-80 {$item->name == $id ? 'bg-red-100 text-red-700' : 'bg-blue-100 text-blue-700'}">
            {$item->name} ({$item->count})
        </a>
        {/foreach}
    </div>
     {* 文章列表带分页 *}

    {var $data = \App\Content\Service\Article::page(tag: $id ?: '', limit: 10)}

    {if !$data}
    {include 'widgets/not-fund.latte'}
    {/if}

    <div class="flex flex-col gap-6 pb-6 mt-5">
        {foreach $data->items() as $item}

        <div class="flex items-start gap-4">
            <div class="flex-none w-36 h-36 bg-gray-100 bg-cover bg-center"
                 style="background-image: url('{$item->images[0]}')"></div>

            <div class="flex-grow">
                <div class="text-gray-500">
                    <a href="/page/article/{$item->class_id}" class="text-blue-600 hover:underline">{$item->class->name}</a>
                    <span class="mx-2 text-gray-300">/</span>
                    {$item->created_at->format('m-d, Y')}
                </div>
                <div>
                    <div class="mt-2 text-lg font-medium text-black">
                        <a href="/page/article-info/{$item->id}" class="hover:underline">{$item->title}</a>
                    </div>
                    <div class="mt-2 text-gray-500 overflow-hidden h-14 leading-7">
                        {$item->descriptions}
                    </div>
                    <div class="flex-none">
                        <div class="flex items-center gap-2 text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                            <div>{$item->view}</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {/foreach}

    </div>
     {* 文章分页-自定义分页模板 *}
    <div class="flex justify-center">
        {include 'paginate.latte', paginator: $data, prefix: '/page/tags/' . $id}
    </div>


</div>

{/block}